<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Index</title>
    <link rel="stylesheet" href="/hg/css/main.css">
    <link rel="stylesheet" href="/hg/lib/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
    <form>
        <input type="text" name="name"/>
        <input type="button" name="search" onclick="doQueryGoods()" value="搜索"/>
        <input type="button" value="Add" onclick="doAddGoods()"/>
    </form>
    <a href="/goods/toAddGoods">添加</a>
    <table width="50%" class="table">
        <thead>
            <th>id</th>
            <th>name</th>
            <th>remark</th>
            <th>createdTime</th>
            <th>operation</th>
        </thead>
            <tbody>
            <tr th:each="g:${list}">
                <td th:text="${g.id}">1</td>
                <td th:text="${g.name}">MySQL</td>
                <td th:text="${g.remark}">DBMS</td>
                <td th:text="${#dates.format(g.createdTime, 'yyyy/MM/dd HH:mm')}">2020/07/03</td>
                <td>
                    <button th:onclick="doDeleteById('[[${g.id}]]')">delete</button>
                    <button th:onclick="doupdateById([[${g.id}]])">update</button>
                </td>
            </tr>
            </tbody>
    </table>
</div>
<script>
//搜索
function  doQueryGoods() {
    //获取表单输入的品牌名称
    var name = document.forms[0].name.value;

    //访问服务端hid的url
    // location.href='http://localhost:8088/goods/findGoods/'+name;
    //如上语句中使用了js中的模板字符串，其语法为`字符串`，在反引号内部
    //还可以使用${}表达式获取变量的值
    location.href=`http://localhost:8088/goods/findGoods/${name}`;
}
//删除
function doDeleteById(id) {
    location.href=`http://localhost:8088/goods/delGoods/${id}`;
}
//修改
function doupdateById(id) {
    location.href=`http://localhost:8088/goods/toUpdateGoods/${id}`;
}
//添加
    function doAddGoods() {
        location.href=`http://localhost:8088/goods/toAddGoods`;
    }

</script>
</body>
</html>